<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset=utf-8 />
 <title>Minimal Websocket test app</title>
</head>

<body>
<h2>libwebsockets "dumb-increment-protocol" test applet</h2>
The incrementing number is coming from the server and is individual for
each connection to the server... try opening a second browser window.
Click the button to send the server a websocket message to
reset the number.<br><br>

<table>
	<tr>
		<td align=center>
		  <input type=button id=offset value="Reset counter" onclick="reset();">
		  <input type=button id=offset value="Disconnect" onclick="closeIncrementConnection();">
		</td>
		<td width=100 align=center><div id=number> </div></td>
		<td id=wsdi_statustd align=center><div id=wsdi_status>Not initialized</div></td>
	</tr>
</table>

<h2>libwebsockets "lws-mirror-protocol" test applet</h2>
Use the mouse to draw on the canvas below -- all other browser windows open
on this page see your drawing in realtime and you can see any of theirs as
well.
<p>
The lws-mirror protocol doesn't interpret what is being sent to it, it just
re-sends it to every other websocket it has a connection with using that
protocol, including the guy who sent the packet.
<p>libwebsockets-test-client spams circles on to this shared canvas when
run.</p>
<br><br>

<table>
	<tr>
		<td>Drawing color:
		<select id="color" onchange="update_color();">
			<option value=#000000>Black</option>
			<option value=#0000ff>Blue</option>
			<option value=#20ff20>Green</option>
			<option value=#802020>Dark Red</option>
		</select>
		</td>
		<td id=wslm_statustd align=center><div id=wslm_status>Not initialized</div></td>
	</tr>
	<tr>
	  <button id="clearCanvasButton" onclick="clearCanvas()">Clear Canvas</button>
	</tr>
	<tr>
		<td colspan=2 width=500 align=center style="background-color: #e0e0e0;"><div id="wslm_drawing"> </div></td>
	</tr>
</table>

<script>
	var pos = 0;

function get_appropriate_ws_url()
{
	var pcol;
	var u = document.URL;

	/*
	 * We open the websocket encrypted if this page came on an
	 * https:// url itself, otherwise unencrypted
	 */

	if (u.substring(0, 5) == "https") {
		pcol = "wss://";
		u = u.substr(8);
	} else {
		pcol = "ws://";
		if (u.substring(0, 4) == "http")
			u = u.substr(7);
	}

	u = u.split('/');

	return pcol + u[0];
}


document.getElementById("number").textContent = get_appropriate_ws_url();

/* dumb increment protocol */

	var ws_ctor = window['MozWebSocket'] ? window['MozWebSocket'] : window['WebSocket'];
	
	var socket_di = new ws_ctor(get_appropriate_ws_url(),
				   "dumb-increment-protocol");  

	try {
		socket_di.onopen = function() {
			document.getElementById("wsdi_statustd").style.backgroundColor = "#40ff40";
			document.getElementById("wsdi_status").textContent = " websocket connection opened ";
		} 

		socket_di.onmessage =function got_packet(msg) {
			document.getElementById("number").textContent = msg.data + "\n";
		} 

		socket_di.onclose = function(){
			document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040";
			document.getElementById("wsdi_status").textContent = " websocket connection CLOSED ";
		}
	} catch(exception) {
		alert('<p>Error' + exception);  
	}

function reset() {
	socket_di.send("reset\n");
}

function closeIncrementConnection() {
  socket_di.close();
}

/* lws-mirror protocol */

	var down = 0;
	var no_last = 1;
	var last_x = 0, last_y = 0;
	var ctx;
	
	var ws_ctor = window['MozWebSocket'] ? window['MozWebSocket'] : window['WebSocket'];
	
	var socket_lm = new ws_ctor(get_appropriate_ws_url(),
				   "lws-mirror-protocol");
	var color = "#000000";

  var lws_error = false;

	try {
		socket_lm.onopen = function() {
			document.getElementById("wslm_statustd").style.backgroundColor = "#40ff40";
			document.getElementById("wslm_status").textContent = " websocket connection opened ";
		}
		
		socket_lm.onerror = function(error) {
		  lws_error = true;
      document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
			document.getElementById("wslm_status").textContent = " websocket connection ERROR ";
		};

		socket_lm.onmessage =function got_packet(msg) {
			j = msg.data.split(';');
			f = 0;
			while (f < j.length - 1) {
				i = j[f].split(' ');
				if (i[0] == 'd') {
					ctx.strokeStyle = i[1];
					ctx.beginPath();
					ctx.moveTo(+(i[2]), +(i[3]));
					ctx.lineTo(+(i[4]), +(i[5]));
					ctx.stroke();
				}
				if (i[0] == 'clear') {
				  ctx.clearRect(0,0,480,300);
				}
				if (i[0] == 'c') {
					ctx.strokeStyle = i[1];
					ctx.beginPath();
					ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true); 
					ctx.stroke();
				}

				f++;
			}
		}

		socket_lm.onclose = function(){
		  if (!lws_error) {
  			document.getElementById("wslm_statustd").style.backgroundColor = "#ff4040";
  			document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
		  }
		}
	} catch(exception) {
		alert('<p>Error' + exception);  
	}

	var canvas = document.createElement('canvas');
	canvas.height = 300;
	canvas.width = 480;
	ctx = canvas.getContext("2d");

	document.getElementById('wslm_drawing').appendChild(canvas);

	canvas.addEventListener('mousemove', ev_mousemove, false);
	canvas.addEventListener('mousedown', ev_mousedown, false);
	canvas.addEventListener('mouseup', ev_mouseup, false);

	offsetX = offsetY = 0;
	element = canvas;
      if (element.offsetParent) {
        do {
          offsetX += element.offsetLeft;
          offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
      }
 
function update_color() {
	color = document.getElementById("color").value;
}

function ev_mousedown (ev) {
	down = 1;
}

function ev_mouseup(ev) {
	down = 0;
	no_last = 1;
}

function ev_mousemove (ev) {
	var x, y;

	if (ev.offsetX) {
		x = ev.offsetX;
		y = ev.offsetY;
	} else {
		x = ev.layerX - offsetX;
		y = ev.layerY - offsetY;

	}

	if (!down)
		return;
	if (no_last) {
		no_last = 0;
		last_x = x;
		last_y = y;
		return;
	}
	if (socket_lm.readyState === ws_ctor.OPEN)
	  socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';');

	last_x = x;
	last_y = y;
}

function clearCanvas() {
  if (socket_lm.readyState === ws_ctor.OPEN)
    socket_lm.send("clear;");
}


</script>

</body>
</html>
